
<template>
  <div class="view-container">
    <header-module padding>
      <template #btn>
        <el-button
          v-auth="{v:['crm:dictionary:pms']}"
          class="main-btn"
          size="small"
          type="primary"
          @click="openDialog"
        >新建</el-button>
      </template>
    </header-module>
    <div class="main-content">
      <div>
        <div class="gva-search-box">
          <el-form
            size="small"
            :inline="true"
            :model="searchInfo"
          >
            <el-form-item label="字典名（中）">
              <el-input
                v-model="searchInfo.name"
                placeholder="搜索条件"
              />
            </el-form-item>
            <el-form-item
              label="字典名（英）"
              style="margin-left: 40px"
            >
              <el-input
                v-model="searchInfo.type"
                placeholder="搜索条件"
              />
            </el-form-item>
            <el-form-item
              label="状态"
              prop="status"
              style="margin-left: 40px"
            >
              <el-select
                v-model="searchInfo.status"
                clear
                placeholder="请选择"
              >
                <el-option
                  key="true"
                  label="是"
                  value="true"
                />
                <el-option
                  key="false"
                  label="否"
                  value="false"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="描述"
              style="margin-left: 40px"
            >
              <el-input
                v-model="searchInfo.desc"
                placeholder="搜索条件"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                class="border-btn"
                @click="onReset"
              >重置</el-button>
              <el-button
                size="small"
                class="main-btn"
                type="primary"
                @click="onSubmit"
              >查询</el-button>

            </el-form-item>
          </el-form>
        </div>
        <div class="gva-table-box">
          <el-table
            ref="multipleTable"
            :data="tableData"
            style="width: 100%"
            tooltip-effect="dark"
            row-key="id"
            header-cell-class-name="table-header"
            border
            :default-sort="{prop: 'CreatedAt', order: 'descending'}"
          >
            <!-- <el-table-column
              type="selection"
              min-width="20%"
            /> -->
            <el-table-column
              align="left"
              sortable
              label="日期"
              prop="created_at"
              width="230px"
            >
              <template #default="scope">{{ dateFormat('yyyy-mm-dd HH:MM', scope.row.createdAt) }}</template>
            </el-table-column>

            <el-table-column
              align="left"
              sortable
              label="字典名（中）"
              prop="name"
              width="230px"
            />

            <el-table-column
              align="left"
              sortable
              label="字典名（英）"
              prop="type"
              width="230px"
            />

            <el-table-column
              align="left"
              label="字典类型"
              prop="status"
              width="120"
            >
              <template #default="scope">
                <span v-if="scope.row.isSystem">系统字典</span>
                <span v-else>用户字典</span>
              </template>
            </el-table-column>

            <el-table-column
              align="left"
              sortable
              label="状态"
              prop="status"
              width="150px"
            >
              <template #default="scope">
                <el-tag v-if="scope.row.status">正常</el-tag>
                <el-tag
                  v-if="!scope.row.status"
                  type="danger"
                >停用</el-tag>
              </template>
            </el-table-column>

            <el-table-column
              align="left"
              sortable
              label="描述"
              prop="desc"
              show-overflow-tooltip
            />

            <el-table-column
              align="left"
              fixed="right"
              label=" 操作"
              width="200px"
            >
              <template #default="scope">
                <el-button
                  size="small"
                  type="text"
                  @click="toDetile(scope.row)"
                >详情</el-button>
                <el-button
                  v-auth="{v:['crm:dictionary:pms']}"
                  size="small"
                  type="text"
                  @click="updateSysDictionary(scope.row)"
                >变更</el-button>
                <template v-if="scope.row.isSystem===1">
                  <el-popover
                    :visible="scope.row.visible"
                    placement="top"
                    width="160"
                  >
                    <p style="margin:10px auto;">确定要删除吗？</p>
                    <div style="text-align: right; margin-top: 8px;">
                      <el-button
                        size="small"
                        class="border-btn"
                        @click="scope.row.visible = false"
                      >取消</el-button>
                      <el-button
                        type="primary"
                        class="main-btn"
                        size="small"
                        @click="deleteSysDictionary(scope.row)"
                      >确定</el-button>
                    </div>
                    <template #reference>
                      <el-button
                        type="text"
                        class="danger"
                        size="small"
                        style="margin-left:10px"
                      >删除</el-button>
                    </template>
                  </el-popover>
                </template>

              </template>
            </el-table-column>
          </el-table>

          <div class="gva-pagination">
            <el-pagination
              background
              :current-page="page"
              :page-size="pageSize"
              :page-sizes="[10, 30, 50, 100]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            />
          </div>
        </div>
        <el-dialog
          v-model="dialogFormVisible"
          :before-close="closeDialog"
          title="弹窗操作"
        >
          <el-form
            ref="elForm"
            :model="formData"
            :rules="rules"
            size="small"
            label-width="110px"
          >
            <el-form-item
              label="字典名（中）"
              prop="name"
            >
              <el-input
                v-model="formData.name"
                placeholder="请输入字典名（中）"
                clearable
                :style="{width: '100%'}"
              />
            </el-form-item>
            <el-form-item
              label="字典名（英）"
              prop="type"
            >
              <el-input
                v-model="formData.type"
                placeholder="请输入字典名（英）"
                clearable
                :style="{width: '100%'}"
              />
            </el-form-item>
            <el-form-item
              label="字典类型"
              prop="isSystem"
            >
              <el-radio-group v-model="formData.isSystem">
                <el-radio :label="true">系统字典</el-radio>
                <el-radio :label="false">用户字典</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="状态"
              prop="status"
              required
            >
              <el-switch
                v-model="formData.status"
                active-text="开启"
                inactive-text="停用"
              />
            </el-form-item>
            <el-form-item
              label="描述"
              prop="desc"
            >
              <el-input
                v-model="formData.desc"
                placeholder="请输入描述"
                clearable
                :style="{width: '100%'}"
              />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button
                size="small"
                @click="closeDialog"
              >取 消</el-button>
              <el-button
                size="small"
                type="primary"
                @click="enterDialog"
              >确 定</el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  DICTIONARY_CREATE,
  DICTIONARY_DELETE,
  DICTIONARY_FIND,
  DICTIONARY_LIST,
  DICTIONARY_UPDATE,
} from '@CRM/api/sysDictionary' //  此处请自行替换地址
import infoList from '@CRM/mixins/infoList'
import warningBar from '@/components/warningBar/warningBar.vue'

export default {
  name: 'Index',
  components: {
    warningBar,
  },
  mixins: [infoList],
  data() {
    return {
      listApi: DICTIONARY_LIST,
      dialogFormVisible: false,
      type: '',
      formData: {
        name: null,
        type: null,
        isSystem: true,
        status: true,
        desc: null,
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入字典名（中）',
            trigger: 'blur',
          },
        ],
        type: [
          {
            required: true,
            message: '请输入字典名（英）',
            trigger: 'blur',
          },
        ],
        isSystem: [
          {
            required: true,
            message: '请选择字典类型',
            trigger: 'change',
          },
        ],
        desc: [
          {
            required: true,
            message: '请输入描述',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  async created() {
    this.getTableData()
  },
  methods: {
    toDetile(row) {
      console.log(row)
      this.$router.push({
        name: 'crmDictionaryDetail',
        query: {
          id: row.id,
          isSystem: row.isSystem,
        },
      })
    },
    onReset() {
      this.page = 1
      this.searchInfo = {}
      this.getTableData()
    },
    // 条件搜索前端看此方法
    onSubmit() {
      this.page = 1
      if (this.searchInfo.status === '') {
        this.searchInfo.status = null
      }
      this.getTableData()
    },
    async updateSysDictionary(row) {
      const res = await DICTIONARY_FIND({ ID: row.id })
      this.type = 'update'
      if (res.code === 0) {
        this.formData = res.data.resysDictionary
        this.dialogFormVisible = true
      }
    },
    closeDialog() {
      this.dialogFormVisible = false
      this.formData = {
        name: null,
        type: null,
        status: true,
        desc: null,
        isSystem: true,
      }
    },
    async deleteSysDictionary(row) {
      row.visible = false
      const res = await DICTIONARY_DELETE({ ID: row.id })
      if (res.code === 0) {
        this.$message({
          type: 'success',
          message: '删除成功',
        })
        if (this.tableData.length === 1 && this.page > 1) {
          this.page--
        }
        this.getTableData()
      }
    },
    async enterDialog() {
      this.$refs['elForm'].validate(async(valid) => {
        if (!valid) return
        let res
        switch (this.type) {
          case 'create':
            res = await DICTIONARY_CREATE(this.formData)
            break
          case 'update':
            res = await DICTIONARY_UPDATE(this.formData)
            break
          default:
            res = await DICTIONARY_CREATE(this.formData)
            break
        }
        if (res.code === 0) {
          this.closeDialog()
          this.getTableData()
        }
      })
    },
    openDialog() {
      this.type = 'create'
      this.dialogFormVisible = true
    },
  },
}
</script>

<style>
</style>
